<template>
  <div class="container">
    <div class="match_desc flex-row vux-1px-b">
      <div class="flex-grow-1 flex-left">
        {{allData.big_game_name}} {{allData.phase_name}}
      </div>
      <div class="flex-grow-1 flex-right">
        {{allData.start_time | week2}}
      </div>
    </div>
    <div class="flex-row matchBox">
      <div class="flex-grow-1">
        <img style="width: 1.08rem;height: 1.08rem" v-lazy="allData.apic"
             alt="">
        <p id="play_a_name">{{allData.play_a_name}}</p>
      </div>
      <!-- VS -->
      <div class="flex-grow-0 VS-code">
        <p>VS</p>
      </div>

      <div class="flex-grow-1">
        <img style="width: 1.08rem;height:1.08rem" v-lazy="allData.bpic"
             alt="">
        <p id="play_b_name">{{allData.play_b_name}}</p>
      </div>
    </div>
    <div class="matchLine vux-1px-b"></div>

    <div class="choose_big_Box">
      <!--<div class="shopping_trolley" v-show="allData.car_count>0">-->
      <!--&lt;!&ndash;购物车跳转,当前比赛的id,当前用户的id&ndash;&gt;-->
      <!--<img @click="toCart" v-src="'/static/img/buyCart.png'" alt="">-->
      <!--<div class="Arabic_numerals">{{allData.car_count}}</div>-->
      <!--</div>-->
      <!--标准胜负-->
      <div v-if="allData.standard_odss" class="choose-list vux-1px-b">
        <p class="chooseTitle">标准胜负</p>
        <div class="chooseBox flex-list">
          <div class="flex-grow-0 odds-box"
               @click="chooseClick('左胜',allData.standard_odss['1_winner_odds'],1,allData.standard_odss.guess_type,allData.standard_odss.id)">
            <p class="odds-title">左胜</p>
            <p class="odds">赔率:{{allData.standard_odss['1_winner_odds'] | getCount}}</p>
          </div>
          <!-- 只有足球才会出现平局 -->
          <div v-if="allData.s_id==6" class="flex-grow-0 odds-box"
               @click="chooseClick('平局',allData.standard_odss['3_winner_odds'],3,allData.standard_odss.guess_type,allData.standard_odss.id)">
            <p class="odds-title">平局</p>
            <p class="odds">赔率:{{allData.standard_odss['3_winner_odds'] | getCount}}</p>
          </div>
          <div class="flex-grow-0 odds-box"
               @click="chooseClick('右胜',allData.standard_odss['2_winner_odds'],2,allData.standard_odss.guess_type,allData.standard_odss.id)">
            <p class="odds-title">右胜</p>
            <p class="odds">赔率:{{allData.standard_odss['2_winner_odds'] | getCount}}</p>
          </div>
        </div>
      </div>
      <!--让分投注-->
      <div v-if="allData.lettingScore_odds" class="choose-list vux-1px-b">
        <p class="chooseTitle">最终比分 <span class="green">左<span style="font-weight: 600">{{allData.lettingScore_odds['1_winner_rangfen']>0?'+'+allData.lettingScore_odds['1_winner_rangfen']:allData.lettingScore_odds['1_winner_rangfen']}}</span></span></p>
        <!--<p class="chooseTitle">让分投注 <span class="red" style="margin-left: 1rem">最终得分左<span style="font-weight: 600">{{allData.lettingScore_odds['1_winner_rangfen']>0?'+'+allData.lettingScore_odds['1_winner_rangfen']:allData.lettingScore_odds['1_winner_rangfen']}}</span></span></p>-->
        <div class="flex-list chooseBox">
          <div class="odds-box flex-grow-0"
               @click="chooseClick('左胜',allData.lettingScore_odds['1_rangfen_odds'],1,allData.lettingScore_odds.guess_type,allData.lettingScore_odds.id)">
            <!--<p class="odds-title">{{allData.lettingScore_odds['1_winner_rangfen']}}</p>-->
            <p class="odds-title">左胜</p>
            <p class="odds">赔率:{{allData.lettingScore_odds['1_rangfen_odds'] | getCount}}</p>
          </div>
          <!-- 只有足球才会出现平局 -->
          <!--{if condition="$s_id == 6"}-->
          <div v-if="allData.s_id==6" class="odds-box flex-grow-0"
               @click="chooseClick('平局',allData.lettingScore_odds['3_rangfen_odds'],3,allData.lettingScore_odds.guess_type,allData.lettingScore_odds.id)">
            <p class="odds-title">平局</p>
            <p class="odds">赔率:{{allData.lettingScore_odds['3_rangfen_odds'] | getCount}}</p>
          </div>
          <div class="odds-box flex-grow-0"
               @click="chooseClick('右胜',allData.lettingScore_odds['2_rangfen_odds'],2,allData.lettingScore_odds.guess_type,allData.lettingScore_odds.id)">
            <!--<p class="odds-title">{{allData.lettingScore_odds['2_winner_rangfen']}}</p>-->
            <p class="odds-title">右胜</p>
            <p class="odds">赔率:{{allData.lettingScore_odds['2_rangfen_odds'] | getCount}}</p>
          </div>
        </div>
      </div>
      <!-- 只有台球才会有局数 -->
      <div v-if="allData.gameNumbers_odds && allData.s_id==2" class="choose-list vux-1px-b">
        <!--{if condition="$s_id == 2"}-->
        <!--{if condition="$vo.js_peilv.1_jushu neq null"}-->
        <p class="chooseTitle">局数</p>
        <div class="chooseBox flex-list">
          <div class="odds-box flex-grow-0"
               @click="chooseClick('小于'+allData.gameNumbers_odds['1_jushu']+'局',allData.gameNumbers_odds['1_odds_js'],1,allData.gameNumbers_odds.guess_type,allData.gameNumbers_odds.id)">
            <p class="odds-title">小于{{allData.gameNumbers_odds['1_jushu']}}局</p>
            <p class="odds">赔率:{{allData.gameNumbers_odds['1_odds_js'] | getCount}}</p>
          </div>

          <div class="odds-box flex-grow-0"
               @click="chooseClick(allData.gameNumbers_odds['2_jushu']+'局',allData.gameNumbers_odds['2_odds_js'],2,allData.gameNumbers_odds.guess_type,allData.gameNumbers_odds.id)">
            <p class="odds-title">{{allData.gameNumbers_odds['2_jushu']}}局</p>
            <p class="odds">赔率:{{allData.gameNumbers_odds['2_odds_js'] | getCount}}</p>
          </div>

          <div class="odds-box flex-grow-0"
               @click="chooseClick('大于'+allData.gameNumbers_odds['3_jushu']+'局',allData.gameNumbers_odds['3_odds_js'],3,allData.gameNumbers_odds.guess_type,allData.gameNumbers_odds.id)">
            <p class="odds-title">大于{{allData.gameNumbers_odds['3_jushu']}}局</p>
            <p class="odds">赔率:{{allData.gameNumbers_odds['3_odds_js'] | getCount}}</p>
          </div>
        </div>
      </div>

      <!--第三栏 总得分投注-->
      <!--{if condition="$s_id neq 2"}-->
      <!--{if condition="$vo.zf_peilv neq null"}-->
      <div v-if="allData.totalScore_odds" class="choose-list vux-1px-b">
        <p class="chooseTitle">全场总得分</p>
        <div class="chooseBox flex-list">
          <div class="odds-box flex-grow-0"
               @click="chooseClick('大于'+allData.totalScore_odds['total_score'],allData.totalScore_odds['1_compare_odds'],1,allData.totalScore_odds.guess_type,allData.totalScore_odds.id)">
            <p class="odds-title">大于{{allData.totalScore_odds['total_score']}}</p>
            <p class="odds">赔率:{{allData.totalScore_odds['1_compare_odds'] | getCount}}</p>
          </div>

          <div class="odds-box flex-grow-0"
               @click="chooseClick('小于'+allData.totalScore_odds['total_score'],allData.totalScore_odds['2_compare_odds'],2,allData.totalScore_odds.guess_type,allData.totalScore_odds.id)">
            <p class="odds-title">小于{{allData.totalScore_odds['total_score']}}</p>
            <p class="odds">赔率:{{allData.totalScore_odds['2_compare_odds'] | getCount}}</p>
          </div>
        </div>
        <!-- end -->
      </div>

      <!-- 是否都进球,只有足球才会有 -->
      <div v-if="allData.s_id==6 && allData.isScore_odds" class="choose-list vux-1px-b">
        <!--{if condition="$s_id == 6"}-->
        <!--{if condition="$vo.jq_peilv neq null"}-->
        <p class="chooseTitle">是否得分</p>
        <div class="chooseBox flex-list">
          <div class="odds-box flex-grow-0"
               @click="chooseClick('是',allData.isScore_odds['1_score_odds'],1,allData.isScore_odds.guess_type,allData.isScore_odds.id)">
            <p class="odds-title">是</p>
            <p class="odds">赔率:{{allData.isScore_odds['1_score_odds'] | getCount}}</p>
          </div>
          <div class="odds-box"
               @click="chooseClick('否',allData.isScore_odds['2_score_odds'],2,allData.isScore_odds.guess_type,allData.isScore_odds.id)">
            <p class="odds-title">否</p>
            <p class="odds">赔率:{{allData.isScore_odds['2_score_odds'] | getCount}}</p>
          </div>
        </div>
        <!-- end 足球是否都进球结束-->
      </div>

      <!-- 比分赔率,只有台球才有-->
      <div v-if="allData.s_id==2 && allData.score_odds" class="choose-list">
        <p class='chooseTitle'>比分</p>
        <div v-show="i%2!==0 && allData.score_odds[i+'_bifen']" class="chooseBox bifen_box flex-list"
             v-for="i in allData.score_odds.game_win_number*2">
          <div class='odds-box flex-grow-0'
               @click="chooseClick(allData.score_odds[i+'_bifen'],allData.score_odds[i+'_peilv_bf'],i,allData.score_odds.guess_type,allData.score_odds.id)">
            <p class='odds-title'>{{allData.score_odds[i+'_bifen']}}</p>
            <p class='odds'>赔率:{{allData.score_odds[i+'_peilv_bf'] | getCount}}</p>
          </div>
          <div class='odds-box flex-grow-0 no_border'>
            <p class='odds-title'></p>
            <p class='odds'></p>
          </div>
          <div class='odds-box flex-grow-0'
               @click="chooseClick(allData.score_odds[(i+1)+'_bifen'],allData.score_odds[(i+1)+'_peilv_bf'],i+1,allData.score_odds.guess_type,allData.score_odds.id)">
            <p class='odds-title'>{{allData.score_odds[(i+1)+'_bifen']}}</p>
            <p class='odds'>赔率:{{allData.score_odds[(i+1)+'_peilv_bf'] | getCount}}</p>
          </div>
        </div>
      </div>
    </div>
    <!--buy-confirm-->
    <div @click="maskclick" v-show="buyConfirm" class="mask"></div>
    <div class="white-content2" v-show="buyConfirm">
      <div class="top-title flex-row flex-y-center">
        <div class="flex-grow-1 flex-right" id="top_left_name">{{allData.play_a_name}}</div>
        <div class="flex-grow-0">&nbsp; vs &nbsp;</div>
        <div class="flex-grow-1" id="top_right_name">{{allData.play_b_name}}</div>
      </div>
      <div class="desc flex-row">
        <div class="flex-grow-1">
          <span id="left_name">{{allData.play_a_name}}</span>
          <span id="middle-name">{{cartData.type}}</span>
          <span id="right_name">{{allData.play_b_name}}</span>
        </div>
        <div class="oddss flex-grow-1 flex-right flex-y-center">
          当前赔率：<span id="popup_odds">{{cartData.odds | getCount}}</span>
        </div>
      </div>
      <div class="inputBox flex-row flex-y-center">
        投注金额：<input
              v-model="cartData.inputval"
              class="flex-grow-1"
              type="number"
              pattern="[0-9]*"
              @keyup="inputkeyup"
              placeholder="请输入金额">
      </div>
      <div class="total flex-row">
        <div class="flex-grow-1">
          当前余额：<span id="popup_userMoney">{{yue?yue:'0.00'}}</span>
        </div>
        <div class="flex-grow-1">赢取金额：<span id="win_money">{{t_z_total | getCount}}</span></div>
      </div>
      <div class="flex-row button-box">
        <div @click="addCart" :class="isAddcart?'':'disabled'"
             class="addCart isAddCart flex-grow-0 flex-x-center flex-y-center">
          加入购物车
        </div>
        <div @click="buyClick" class="buy flex-grow-0 flex-x-center flex-y-center">
          下注
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import MDUtils from 'src/assets/js/md-utils'
  import {GETGUESSDETAILSDDATA, USERADDCART, USEBUY} from 'src/const/uri'
  import {bodyScroll} from "src/assets/js/md-utils";

  document.title = '竞猜详情';
  export default {
    name: "guessDetails",
    data() {
      return {
        match_id: MDUtils.getQueryParam('id'),
        buyConfirm: false,
        allData: {},
        yue: '',
        cartData: {
          inputval: ''
        },
        uid: '',
        token: '',
        isAddcart: true,
      }
    },
    watch: {
      'cartData.inputval'(val) {
        if (val && !isNaN(val) && val - 0 > 0) {
          if (Number(val) > Number(this.yue)) {
            this.$vux.toast.show({
              type: 'text',
              text: '输入金额不能大于余额',
              width: '50%'
            })
          }
        }
        // else {
        //   this.$vux.toast.show({
        //     type: 'text',
        //     text: '请输入金额要大于1的数字',
        //     width: '60%'
        //   })
        // }
      }
    },
    computed: {
      t_z_total() {
        let total = '0.00';
        if (this.cartData.inputval) {
          total = this.cartData.odds * this.cartData.inputval;
          return total
        }
        return total;
      }
    },
    mounted() {
      // getuid
      if (window.android) {
        this.uid = window.android.getUid();
        // alert(this.uid);
        // window.localStorage.setItem('jcyy_uid',uid);
        this.initData();
        // alert(uid)
      } else {
        window['getUserToken'] = (token, u_id) => {
          this.uid = u_id;
          // alert(this.uid);
          // this.token = token;
          this.initData();
        };
      }
      if (isDebug) {
        this.uid = window.localStorage.getItem('jcyy_uid')
        this.initData();
      }
      // this.initData();
    },
    methods: {
      initData() {
        this.$ajax.get(GETGUESSDETAILSDDATA + MDUtils.getQueryParam('id') + '/' + this.uid).then(res => {
          // alert(1322222);
          console.log(res.data);
          this.allData = res.data;
          let cartCount = res.data.car_count
          //获得余额
          this.yue = res.data.balance;

          if (window.android) {
            window.android.getCartNumber(cartCount)
          } else {
            // allData.car_count
            //updateNumber
            window.webkit.messageHandlers.lwdkit.postMessage({
              action: "updateNumber",
              data: {
                count: cartCount
              }
            })
          }
        })
      },
      // toCart() {
      //   let toUrl = document.URL.replace(/guessDetails/g, "guessCart").split('?')[0];
      //   if (window.android) {
      //     // window.location.href = toUrl
      //     window.android.jumpTo(toUrl);
      //   } else {
      //     window.location.href = toUrl;
      //   }
      //
      // },
      chooseClick(type, odds, id, guess_type, jc_id) {
        this.isAddcart = this.checkAddCart(guess_type, id);
        this.buyConfirm = true;
        bodyScroll.stop();
        this.cartData.type = type;
        this.cartData.odds = odds;
        this.cartData.jc_pl_id = id;
        this.cartData.guess_type = guess_type;
        this.cartData.jc_id = jc_id;
        console.log(type, odds, id, guess_type, jc_id);
      },
      maskclick() {
        this.commenSet()
      },
      checkAddCart(guess_type, id) {
        //竞猜类型 1标准胜负 | 2让分投注 |3局数 |4局间|5比分|6全场总得分 |7是否都进球
        console.log(guess_type);
        /**
         *  userBf_jcplId 比分
         *  userDf_jcplId 总得分
         *  userJj_jcplId 局间
         *   userJq_jcplId 是否进球
         *   userJs_jcplId 局数
         *  userRf_jcplId 让分
         *  userSf_jcplId 标准胜负
         * */
        //arr.indexOf(某元素)：未找到则返回 -1。
        if (guess_type == 1) {
          return this.checktype('userSf_jcplId', id)
        } else if (guess_type == 2) {
          return this.checktype('userRf_jcplId', id)
        } else if (guess_type == 3) {
          return this.checktype('userJs_jcplId', id)
        } else if (guess_type == 4) {
          return this.checktype('userJj_jcplId', id)
        } else if (guess_type == 5) {
          return this.checktype('userBf_jcplId', id)
        } else if (guess_type == 6) {
          return this.checktype('userDf_jcplId', id)
        } else if (guess_type == 7) {
          return this.checktype('userJq_jcplId', id)
        }
      },
      checktype(userDf_jcplId, id) {
        if (!this.allData[userDf_jcplId]) {
          return true;
        } else if (this.allData[userDf_jcplId].indexOf(id) > -1) {
          return false;
        } else {
          return true;
        }
      },
      addCart() {
        if (this.isAddcart) {
          /**
           * * @param uid       用户id
           * @param game_id   比赛主键id
           * @param jc_id     竞猜类型表主键id
           * @param jc_pl_id  玩法id(比如,标准胜负左胜jc_pl_id就是1)
           * @param jc_type   什么类型的玩法
           * @param odds      赔率
           * @param s_id      体育类目
           */
          /**
           * game_id:this.allData.id,
           jc_id:this.cartData.jc_id,
           jc_pl_id:this.cartData.jc_pl_id,
           jc_type:this.cartData.guess_type,
           odds:this.cartData.odds,
           s_id:this.allData.s_id,
           */
              // console.log(21);
          let formdata = new FormData();
          formdata.append('uid', this.uid);
          formdata.append('game_id', this.allData.id);
          formdata.append('jc_id', this.cartData.jc_id);
          formdata.append('jc_pl_id', this.cartData.jc_pl_id);
          formdata.append('jc_type', this.cartData.guess_type);
          formdata.append('odds', this.cartData.odds);
          formdata.append('s_id', this.allData.s_id);
          this.$ajax.uploadForm(USERADDCART, {}, formdata).then(res => {
            console.log(res);
            this.commenSet();
            if (res.code == 200) {
              this.$vux.toast.text(res.msg);
              this.cartData.inputval = '';
              this.initData();
            }
          })
        } else {
          this.$vux.toast.text('您已经加入过购物车，即可下注');
          return false;
        }

      },
      buyClick() {
        /**
         * @param uid       用户id
         * @param game_id   比赛主键id
         * @param jc_id     竞猜类型表主键id
         * @param jc_pl_id  玩法id(比如,标准胜负左胜jc_pl_id就是1)
         * @param jc_type   什么类型的玩法
         * @param odds      赔率
         * @param s_id      体育类目
         * @param wager     投注金额
         */
        if (this.cartData.inputval >= 1) {
          if (Number(this.cartData.inputval) <= Number(this.yue)) {
            let formdata = new FormData();
            formdata.append('uid', this.uid);
            formdata.append('game_id', this.allData.id);
            formdata.append('jc_id', this.cartData.jc_id);
            formdata.append('jc_pl_id', this.cartData.jc_pl_id);
            formdata.append('jc_type', this.cartData.guess_type);
            formdata.append('odds', this.cartData.odds);
            formdata.append('s_id', this.allData.s_id);
            formdata.append('wager', this.cartData.inputval);
            this.$ajax.uploadForm(USEBUY, {}, formdata).then(res => {
              console.log(res);
              this.commenSet()
              if (res.code == 200) {
                this.$vux.toast.text(res.msg);
                this.initData();
              }
            })
          } else {
            this.commenSet();
            this.toRecharge();
          }
        } else {
          this.$vux.toast.text('最少一块钱');
        }
      },
      toRecharge() {
        this.$vux.confirm.show({
          title: '余额不足',
          content: '请去我的中心充值',
          onCancel: () => {
            console.log('plugin cancel')
          },
          onConfirm: () => {
            if (window.android) {
              window.android.toRecharge();
            } else {
              //pushToDrawCash 提现方法
              window.webkit.messageHandlers.lwdkit.postMessage({
                action: "pushToRecharge",
                data: {}
              })
            }
          }
        })
      },
      commenSet() {
        this.buyConfirm = false;
        this.cartData.inputval = '';
        bodyScroll.move();
      },
      inputkeyup() {
        let wager = this.cartData.inputval.replace(/^\s+|\s+$/g, "");
        if (wager.length != 0) {
          let intWager = parseInt(wager);
          if (wager != intWager) {    //说明输入的是小数
            this.cartData.inputval = Math.ceil(wager);    //给它向上取整
          }
        }
      },
      onFocus(e) {
        if (this.yue > 0) {
          setTimeout(() => {
            this.cartData.inputval = 1;
            this.$vux.toast.show({
              text: '至少为1元',
              type: 'text',
              time: 1000
            });
          }, 10);
        } else {
          if (this.yue <= 0 || this.yue == '') {
            this.toRecharge();
            // this.$vux.toast.text('余额不足请充值');
          }
        }
      },
    }
  }
</script>

<style scoped lang="less">
  @commonColor: #f2f2f2;
  .match_desc {
    width: 90%;
    margin: 0 auto;
    padding: .1rem 0;
    font-size: 14px;
    color: @qianhui;

    &.vux-1px-b:after {
      border-color: @commonColor;
    }
  }

  .matchBox {
    padding: 0.4rem 0 0.3rem;
    text-align: center;

    p {
      margin-top: 0.2rem;
      font-size: 14px;
      color: #646464;
      font-family: PingFang-SC-Regular
    }

    .VS-code {
      /*margin-top: 0.2rem;*/

      p {
        font-size: 28px;
        color: #E10019;
      }
    }
  }

  .matchLine {
    width: 90%;
    margin: 0 auto;

    &.vux-1px-b:after {
      border-color: @commonColor;
    }
  }

  .choose_big_Box {
    padding-top: 0.2rem;
    position: relative;
    /* 购物车样式 */

    .shopping_trolley {
      width: 30%;
      height: 35px;
      margin-left: 70%;
      border-radius: 50px;
      position: relative;

      img {
        width: 100%;
        height: 100%;
      }

      .Arabic_numerals {
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        top: -0.1rem;
        right: 11%;
        font-size: 12px;
        color: #fff;
      }
    }

    .choose-list {
      padding: 0 8% 0.4rem;

      &.vux-1px-b:after {
        border-color: @commonColor;
      }
    }

    .chooseTitle {
      font-size: 14px;
      color: #343434;
      padding: 0.12rem 0;
    }

    .chooseBox {
      &.bifen_box {
        padding-bottom: 0.2rem;
      }

      .odds-box {
        width: 23%;
        /*border: 1px solid #C1C1C1;*/
        font-size: 12px;

        background: #fff;
        text-align: center;
        padding: 0.1rem 0;
        position: relative;

        &:after {
          content: " ";
          position: absolute;
          left: 0;
          top: 0;
          width: 200%;
          height: 1px;
          border: 1px solid #C1C1C1;
          color: #C1C1C1;
          height: 200%;
          border-radius: 5px;
          transform-origin: left top;
          transform: scale(0.5);
        }

        &.no_border {
          &:after {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            width: 200%;
            height: 1px;
            border: 1px solid transparent;
            color: transparent;
            height: 200%;
            border-radius: 5px;
            transform-origin: left top;
            transform: scale(0.5);
          }
        }
      }

      .odds-title {
        color: #4A4A4A;
      }

      .odds {
        color: #F34F37;
      }
    }
  }

  /*购买弹框*/
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    z-index: 10;
  }

  .white-content2 {
    width: 92%;
    /*width:6.8rem;*/
    min-height: 2rem;
    background: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    border-radius: 5px;
    padding: 0 0.15rem;
    z-index: 12;
    /* transform:translate(-50%;-50%);
   -ms-transform:translate(-50%;-50%);
   -moz-transform:translate(-50%;-50%);
   -webkit-transform:translate(-50%;-50%);
   -o-transform:translate(-50%;-50%);  */
  }

  .top-title {
    height: 0.9rem;
    border-bottom: 1px solid #ccc;
    font-size: 0.3rem;
  }

  .desc {
    font-size: 0.28rem;
    color: #63B8FF;
    margin: 0.2rem 0;
    padding-left: 0.2rem
  }

  .desc .oddss {
    /*color: #000;*/
    padding-right: 0.2rem;
  }

  .inputBox {
    height: 0.54rem;
    font-size: 0.3rem;
    padding-left: 0.2rem;
  }

  .inputBox input {
    font-size: 0.28rem;
    border: 0;
    background: #ddd;
    border-radius: 3px;
    height: 100%;
    margin-left: 0.2rem;
    outline: none;
    padding-left: 10px;
  }

  .total {
    padding-left: 0.2rem;
    font-size: 0.28rem;
    margin: 0.2rem 0;
  }

  .total span {
    color: red;
  }

  .button-box {
    height: 1rem;
    font-size: 16px;
    border-top: 1px solid #ccc;
    padding: 0.05rem 0;
  }

  .button-box div {
    width: 50%;
  }

  .addCart {
    border-right: 1px solid #ccc;
  }

  .buy, .addCart {
    color: #63B8FF;
  }

  .addCart.isAddCart {
    color: #FF6A6A;
  }

  .addCart.disabled {
    color: #B8B8B8;
  }

  .toast {
    width: 50%;
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    border-radius: 5px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 14px;
  }

  .green{
    color: #63B8FF;
  }


</style>